<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout/blank"><!-- layout文件路径-->

<head>
    <!-- META SECTION -->
    <title>课程</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- END META SECTION -->
    <style>
        .profile .profile-image img{
            border-radius: 0px !important;
        }
    </style>
</head>

<body>
<!-- PAGE CONTENT -->
<div layout:fragment="content">
    <!-- START X-NAVIGATION VERTICAL -->

    <!-- END X-NAVIGATION VERTICAL -->
    <!-- START BREADCRUMB -->
    <ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="/memberCard/list">课程中心</a></li>
        <li><a th:href="'/unit/list?levelId='+${levelId}">单元列表</a></li>
        <li class="active">课程详细</li>
    </ul>
    <!-- END BREADCRUMB -->
    <!-- PAGE TITLE -->
    <!-- END PAGE TITLE -->
    <!-- PAGE CONTENT WRAPPER -->
    <div class="page-content-wrap">
        <div class="row">
            <div class="col-md-12">
                <!-- START SIMPLE DATATABLE -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">课程明细</h3>
                        <ul class="panel-controls">
                      <li><a href="#" class="panel-collapse"><span class="fa fa-angle-down"></span></a></li>
                            <li><a href="#" class="panel-refresh"><span class="fa fa-refresh"></span></a></li>
                            <li><a href="#" class="panel-remove"><span class="fa fa-times"></span></a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3"  th:each="entity : ${documents}">
                                <!-- CONTACT ITEM -->
                                <div class="panel panel-default">
                                    <div class="panel-body profile">
                                        <div class="profile-image" >
                                            <img th:src="${entity.url}" th:if="${entity.url!=null}"/>
                                            <img th:src="@{/img/noImage.jpg}" th:if="${entity.url==null}"/>
                                        </div>
                                        <div class="profile-data">
                                            <div class="profile-data-name" th:if="${entity.word!=null}" th:text="${entity.word}"></div>
                                        </div>
                                        <div class="profile-controls">
                                            <a title="添加课程" th:if="${entity.id==''}" href="#" th:onclick="editLesson(this)" th:data-documentid="${entity.documentId}" th:data-levelid="${levelId}" th:data-unitid="${unitId}" class="profile-control-left"><span class="fa fa-pencil"></span></a>
                                            <a title="编辑课程" th:if="${entity.id!=''}" href="#" th:onclick="editLesson(this)" th:data-documentid="${entity.documentId}" th:data-id="${entity.id}" th:data-levelid="${levelId}" th:data-unitid="${unitId}" class="profile-control-left"><span class="fa fa-pencil"></span></a>
                                            <a title="视频" th:if="${entity.video}!=''" href="#" th:onclick="playVideo(this)" th:data-src="${entity.video}"  class="profile-control-right-top"><span class="fa fa-film"></span></a>
                                            <a title="try again视频" th:if="${entity.againVideo}!=''" href="#" th:onclick="playVideo(this)" th:data-src="${entity.againVideo}"  class="profile-control-right-bottom"><span class="fa fa-file-movie-o"></span></a>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="contact-info" th:if="${entity.id!=''}" >
                                            <p> <small th:text="${entityStat.index}+1"></small></p>
                                            <p><small th:text="需要录音" th:if="${entity.needRecord=='1'}"></small></p>
                                            <p><small th:text="无需录音" th:if="${entity.needRecord=='0'}"></small></p>
                                            <p><small th:text="单词" th:if="${entity.type=='0'}"></small></p>
                                            <p><small th:text="句子" th:if="${entity.type=='1'}"></small></p>
                                            <p><small th:text="${entity.poster}"></small></p>
                                        </div>
                                        <div class="contact-info" th:if="${entity.id==''}" >
                                            <p><small th:text="${entityStat.index}+1"></small></p>
                                            <p><small>请编辑课程</small></p>
                                        </div>
                                    </div>
                                </div>
                                <!-- END CONTACT ITEM -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END SIMPLE DATATABLE -->
            </div>
        </div>
    </div>
    <!-- PAGE CONTENT WRAPPER -->
    <!-- success -->
    <div class="message-box message-box-success animated fadeIn" id="message-box-success">
        <div class="mb-container">
            <div class="mb-middle">
                <div class="mb-content">
                    <p>播放视频?</p>
                    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="500" data-setup='{}'>
                        <source src="" type="application/x-mpegURL">
                    </video>
                </div>
                <div class="mb-footer">
                    <button class="btn btn-default btn-lg pull-right mb-control-close" onclick="closeBox()">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end success -->
</div>
<!-- START PRELOADS -->
</body>

</html>
